<template>
  <div class="container-layer-mydynamic">
    <div v-for="(temp,index) in list" :key="index" class="container-layer">
      <ItemDynamic :dynamic-data="temp" :can-del="true" />
    </div>
    <div class="container-btn" @click="go(`Releasedynamic`)">
      <img src="@/assets/add_btn.jpg" class="btn">
    </div>
  </div>
</template>

<script>
// api
import { getDynamicList } from '@/api/dynamic'
// item
import ItemDynamic from '@/components/ItemDynamic'
// vuex
import { mapGetters } from 'vuex'
export default {
  components: {
    ItemDynamic: ItemDynamic
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
    methods: {
    go(href) {
      this.$router.push({ name: href })
    }
  },
  async created() {
    this.$store.dispatch('app/toggleMask', true)
    const res = await getDynamicList({ id: this.userInfo.id })
    this.list = res.data
    this.$store.dispatch('app/toggleMask', false)
  }
}
</script>
<style lang="less" scoped>
  .container-btn {
    width: calc(15vw);
    height: calc(15vw);
    position: fixed;
    right: 20px;
    bottom: 70px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 2px 8px #f45050;
    .btn {
      width: 105%;
      height: 105%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
